<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale = 2.0, minimum-scale = 0.5">
    <title>待办事项</title>
    <!-- <script src="../js/angular1.6.9.min.js"></script> -->
    <script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
    <script src="https://cdn.bootcss.com/store.js/1.3.20/store+json2.min.js"></script>
<!--    <link rel="stylesheet" href="css/style.css">-->
    {css href="static/task/css/style.css"}

</head>

<body>
    <div class="container" id="hintLogin" style="display:none; font-size: 15px;">
        <p style="text-align: center">!!! 账户未登录，数据将不会同步到远程服务器 <a href="/login/0">登录</a></p>
    </div>
    <div ng-app="myapp1" ng-controller="ctrl1">
        <header>
            <h1>我的待办</h1>
        </header>
        <div class="cover">
            <form ng-submit="addlist()">
                <p>请输入待办事项:
                    <input id="task_input" class="form-control search" placeholder="Enter vendor key here" type="text" ng-model="List">
                    <img class="help-icon" src="static/task/image/bang-zhu.png" width="30px" height="30px" title="命令　@claer　清空数据">
                </p>
            </form>
            <li class="list-group-item animated bounceInDown">
                预览:{{List}}
<!--                <button class="btn btn-success">完成</button>-->
<!--                <button class="btn btn-danger"> 删除 </button>-->
            </li>


            <div class="main-left">
                <ul class="list-group doing ">
                    <p>未完成</p>
                    <div ng-repeat="(key,todo) in todos">
                        <li id="{{todo.text}}" class="list-group-item animated bounceInDown">
                            <span title="{{todo.text}}">{{todo.text}}</span>
                            <button class="btn btn-success" ng-click="done(key) " ng-checked="{{todo.isDone}} "> 完成 </button>
                            <button class="btn btn-danger" ng-click="delete(todos,key) "> 删除 </button>
                        </li>
                    </div>
                </ul>
            </div>
            <div class="main-right ">
                <ul class="list-group done ">
                    <p>完成</p>
                    <div ng-repeat="(key, doneTodo) in doneTodos " ng-checked="{{todo.isDone}} ">
                        <li id="{{doneTodo.text}}" class="list-group-item animated  bounceInLeft ">
                            <span title="{{doneTodo.text}}">{{doneTodo.text}}</span>
                            <button class="btn btn-warning " ng-click=" undo(key) "> 撤回 </button>
                            <button class="btn btn-danger " ng-click="delete(doneTodos, key) "> 彻底删除 </button>
                        </li>
                    </div>
                </ul>
            </div>
        </div>
    </div>

    <script src="js/main.js "></script>
    {JS href="static/task/js/main.js" /}
</body>

</html>